import { useState, useEffect } from 'react';
import styles from './index.less';
import '../../components/lh/index.js';
// import { Button } from 'antd';
import jQuery from 'jquery';

// const styles = require('./index.less')
const $ = jQuery;
const pageTitle = document.title;

/**
 *
 */
export default () => {
  const lh_storage = localStorage.getItem('lh');
  let lh_init = true;
  if (!lh_storage || lh_storage === 'false') {
    lh_init = false;
  }

  const [lh, setLh] = useState(lh_init); //落花开关
  const [dqVideo, setDqVideo] = useState(null); //当前视频信息

  // console.log('dqVideo', dqVideo);

  //设置落花特效
  const _setLh = () => {
    setLh(!lh);
    localStorage.setItem('lh', String(!lh));
    if (!lh) {
      window.startSakura();
    } else {
      window.stopp();
    }
  };
  //收藏
  const collection = () => {
    const scList = localStorage.getItem('scList') || null;
    console.log('dqVideo', dqVideo);
    if (scList) {
      console.log(JSON.parse(scList));
    } else {
    }
  };

  useEffect(() => {
    setTimeout(() => {
      document.title = pageTitle;
    }, 500);

    const host = location.host;
    if (
      host === 'www.bilibili.com' &&
      __INITIAL_STATE__ &&
      __INITIAL_STATE__.bvid
    ) {
      //是视频详情页
      //换p事件
      $('#multi_page .cur-list li').click(function () {
        setDqVideo({
          bvid: __INITIAL_STATE__.bvid,
          p: String(__INITIAL_STATE__.p),
        });
      });
      setDqVideo({
        bvid: __INITIAL_STATE__.bvid,
        p: String(__INITIAL_STATE__.p),
      });
    }

    //个人空间
    // box-sizing: border-box;
    if (
      location.host === 'space.bilibili.com' &&
      document.title.includes('个人空间')
    ) {
      $('head').append(`
        <style>
          *, *::before, *::after {
            box-sizing: content-box;
          }
        </style>
      `);
    }
  }, []);

  return (
    <div className={styles.indexPage}>
      <div className={styles.box} id="box">
        <div className={styles.rel}>
          <div className={styles.bar} id="bar">
            herry
          </div>
          <div className={styles.content}>
            <div>
              B站开关落花特效：
              <a onClick={_setLh}>{lh ? '开' : '关'}</a>
            </div>
            <div>
              我的学习列表：
              <div>暂无</div>
            </div>
          </div>
        </div>
      </div>
      {location.host === 'www.bilibili.com' &&
        window.__INITIAL_STATE__ &&
        window.__INITIAL_STATE__.bvid && (
          <div className={`${styles.collection}`} onClick={collection}>
            <span className="has-charge">
              <i className="van-icon-general_addto_s"></i>
              收藏到学习
            </span>
          </div>
        )}
    </div>
  );
};
